<template>
  <div id="payment">
    <router-view></router-view>
    <!-- 支付宝支付 -->
    <div v-if="alipayShow" id="alipay">
      <h3 class="title">正在跳转支付宝付款,请稍后!</h3>
      <div class="dec" v-if="isweixin">
          <p>微信中不支持支付宝支付,请点击右上角,选择在浏览器中打开支付!</p>
          <x-button :link="redirect_url">返回选择其他支付方式</x-button>
      </div>
      <div v-else v-html="code_str"></div>
    </div>
    <!-- 微信二维码支付 -->
    <div v-else-if="weixinCodeShow" id="weixin_code">
      <h3 class="title">请使用【微信】扫描二维码,进行支付.</h3>
      <p class="time">有效期 10 分钟.</p>
      <div class="code_box" v-html="code_str"></div>
      <x-button class="btn" :link="redirect_url">返回选择其他支付方式</x-button>
    </div>
    <!-- 微信H5支付 || 微信jsapi支付 -->
    <div v-else-if="weixinH5Show||weixinJsApiShow" id="weixin_h5">
      <h3 class="title">购买房卡</h3>
      <x-table full-bordered style="background-color:#fff;" v-if="orderMsg">
        <tbody>
          <tr>
            <td>订单</td>
            <td>{{orderMsg.order_sn}}</td>
          </tr>
          <tr>
            <td>付款金额</td>
            <td>{{orderMsg.goods_price}}</td>
          </tr>
          <tr>
            <td>商户单号</td>
            <td>{{orderMsg.order_sn}}</td>
          </tr>
          <tr>
            <td>商品</td>
            <td>河北家乡棋牌房卡</td>
          </tr>
          <tr>
            <td>总数</td>
            <td>{{orderMsg.cardnum}}</td>
          </tr>
          <tr>
            <td>总数</td>
            <td>{{orderMsg.givecard}}+{{orderMsg.bonuscard}}</td>
          </tr>
        </tbody>
      </x-table>
      <x-button v-if="weixinH5Show" class="btn" type="primary" :link="H5payurl">立即支付</x-button>
      <x-button v-else class="btn" type="primary"  @click.native="callpay()">立即支付</x-button>
    </div>
  </div>
</template>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
import { XButton, XTable, Alert } from "vux";
import { isWeChat, getUrlString } from "../../scripts/utils.js";
export default {
  data() {
    return {
      code: "", //微信网页授权码
      isweixin: null, //判断是否为微信浏览器
      alipayShow: false, //显示支付宝模板
      weixinCodeShow: false, //显示微信二维码支付模板
      weixinH5Show: false, //微信h5支付
      weixinJsApiShow: false, //微信JsAPI支付
      orderMsg: {}, //订单信息
      code_str: "", //第三方支付
      H5payurl: "", //微信h5支付链接
      redirect_url: "" //返回页面
    };
  },
  created() {
    //判断浏览器类型
    this.isweixin = isWeChat();
    //判断是否从购卡界面过来
    console.log(this.$route)
    if (this.$route.query.ordertype && this.$route.query.pay_code) {
      //判断是否用微信打开[如果是微信就进行授权登录获取网页授权码]
      this.code = getUrlString("code");
      this.apiService.payment
        .pay(
          {
            orderid: this.$route.query.orderid,
            pay_code: this.$route.query.pay_code,
            code: this.code,
            ordertype: this.$route.query.ordertype
          },
          "get"
        )
        .then(res => {
          //跳转指定支付展示页面 //联动优势有特殊处理
          if (res.data.view) {
            this.code_str = res.data.code_str;
            this.orderMsg = res.data.order;
            if (res.data.redirect_url)
              this.redirect_url = res.data.redirect_url;
            //根据不同的模板展示不同的内容
            if (res.data.view == "alipay") this.getAlipayView();
            else if (res.data.view == "weixin_h5") this.getWeixinH5View();
            else if (res.data.view == "weixin_code") this.getWeixinCodeView();
            else if (res.data.view == "weixin_jsapi") this.getWeixinJsapiView();
            else return false;
          } else {
            window.location.href = res.data.payurl;
          }
        });
    }
  },
  updated() {
    let formSubmit = document.querySelector("input[type=submit]");
    if (formSubmit) formSubmit.click();
  },
  components: {
    XButton,
    XTable,
    Alert
  },
  methods: {
    getAlipayView() {
      //显示支付宝模板
      this.alipayShow = true;
    },
    getWeixinH5View() {
      this.weixinH5Show = true;
      this.H5payurl = `${this.code_str}&redirect_url=${this.redirect_url}`;
    },
    getWeixinCodeView() {
      this.weixinCodeShow = true;
    },
    getWeixinJsapiView() {
      this.weixinJsApiShow = true;
    },
    jsApiCall() {
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        JSON.parse(this.code_str),
        function(res) {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            location.href = this.redirect_url;
          }
        }
      );
    },
    callpay() {
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener("WeixinJSBridgeReady", jsApiCall, false);
        } else if (document.attachEvent) {
          document.attachEvent("WeixinJSBridgeReady", jsApiCall);
          document.attachEvent("onWeixinJSBridgeReady", jsApiCall);
        }
      } else {
        this.jsApiCall();
      }
    },
  }
};
</script>
<style scoped>
#payment {
  height: 100%;
}
/*支付宝支付*/
#alipay {
  padding: 0.2rem;
}
.title {
  text-align: center;
  line-height: 1rem;
  font-size: 0.35rem;
}
.dec {
  overflow: hidden;
  position: relative;
}
.dec p {
  font-size: 0.6rem;
  line-height: 1rem;
  padding: 0 0.2rem 0.3rem 0.2rem;
  margin: 0.3rem 0;
}
/*微信二维码支付*/
#weixin_code {
  width: 70%;
  padding: 20px;
  margin: 40px auto;
  text-align: center;
  line-height: 50px;
}
.title {
  font-size: 20px;
}
.time {
  font-size: 17px;
}
.btn {
  margin-top: 20px;
}
/*微信H5支付*/
#weixin_h5 {
  padding: 0.2rem;
  margin-top: 0.2rem;
}
.title {
  font-size: 0.35rem;
  text-align: center;
  line-height: 1rem;
}
.btn {
  margin-top: 1rem;
}
/*微信公众号支付*/
#check {
  padding: 0.2rem;
}
</style>